<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${webConfig.name}</title>
    <meta name="keywords" content="${webConfig.keyword}">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${s.base}/pc/css/Details.css">
    <link rel="stylesheet" href="${s.base}/pc/css/media.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #calendar {
            width: 714px;
            margin-top: 20px;
        }

        .calendar {
            position: relative;
            font-family: "Chinese Quote", "Microsoft YaHei";
            font-size: 14px;
        }


        .calendar-header {
            padding: 11px 16px 11px 0;
            text-align: right;
        }

        .calendar-select {
            line-height: 1.5;
            color: rgba(0, 0, 0, 0.65);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline-block;
            position: relative;
            outline: 0;
        }

        .calendar-table {
            width: 100%;
            height: 100%;
        }

        .calendar-column-header,
        .calendar-cell {
            width: 14%
        }

        .calendar-column-header {
            font-weight: 400;
            text-align: right;
            padding-right: 12px;
        }

        .calendar-table {
            table-layout: fixed;
        }

        .calendar-cell {
            color: rgba(0, 0, 0, 0.65);
        }



        .calendar-cell.calendar-last-month-cell,
        .calendar-cell.calendar-next-month-cell {
            color: rgba(0, 0, 0, 0.25);
        }

        .calendar-date {
            padding: 4px 8px;
            margin: 0 4px;
            border-top: 1px solid #e8e8e8;
        }

        .calendar-cell.calendar-thisMonth .calendar-date,
        .calendar-cell.calendar-today .calendar-date {
            border-top-color: #1890ff;
            background-color: #e6f7ff;
        }

        .calendar-date:hover {
            background: #e6f7ff;
        }


        .calendar-value {
            text-align: center;
        }

        .calendar-content {
            height: 40px;
            overflow-x: hidden;
            overflow-y: auto;
            position: static;
            width: auto;
            left: auto;
            bottom: auto;
        }




        .calendar-select {
            font-size: 13px;
            vertical-align: middle;
        }

        .btn.calendar-select-active {
            border-color: #40a9ff;
            z-index: 2;
        }

        .calendar-select:first-child {
            margin-right: 10px;
        }

        .calendar-year-select,
        .calendar-month-select {
            border-radius: 4px;
            border: 1px solid #d9d9d9;
        }

        .calendar-year-select:hover,
        .calendar-month-select:hover {
            border-color: #40a9ff;
        }

        .calendar-year-text,
        .calendar-month-text {
            margin: 0 10px;
            line-height: 28px;
        }

        .calendar-icon {
            margin: 0 10px 0 0;
        }

        .calendar-icon * {
            color: rgba(0, 0, 0, 0.25);
        }

        .btn {
            float: left;
            padding: 5px 10px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
        }

        .btn-group {
            float: left;
            display: inline;
            padding: 0 8px;
        }

        .btn-group > .btn {
            position: relative;
            float: left;
        }

        .btn-group > .btn:hover {
            z-index: 2;
            border-color: #40a9ff;
        }

        .btn-group .btn + .btn {
            margin-left: -1px;
        }

        .btn-group > .btn:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .btn-group > .btn:last-child:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }


        /*dropdown-menu*/
        ul.dropdown-month, .dropdown-month li,
        ul.dropdown-year, .dropdown-year li {
            list-style: none;
            text-align: center;
            padding: 0;
            margin: 0;
        }

        .dropdown-month.open,
        .dropdown-year.open {
            display: inline-block;
            margin-top: 1px;
            width: 100%;
        }

        .dropdown-month,
        .dropdown-year {
            height: 250px;
            overflow-y: auto;
            overflow-x: hidden;
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            background: #fff;
            width: 50px;
            border: 1px solid #eee;
            box-shadow: 0px 6px 12px rgba(0,0,0,0.175);
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)
        }

        .dropdown-month .month-item,
        .dropdown-year .year-item {
            font-size: 12px;
            position: relative;
            display: block;
            padding: 5px 2px;
            line-height: 20px;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.65);
            white-space: nowrap;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-transition: background 0.3s ease;
            transition: background 0.3s ease;
        }

        .month-item:hover,
        .year-item:hover {
            background: #e6f7ff;
        }

        .year-item.active {
            background-color: #fafafa;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.65);
        }
        /*自定义事件样式*/
        ul.events li {
            white-space: nowrap;
            font-size: 13px;
            padding: 9px 2px;
            text-align: center;
        }
        ul.events li:before {
            content: "余位："
        }

        /*scrollbar*/
        *::-webkit-scrollbar {
            width: 8px;
            background-color: #fff;
        }

        *::-webkit-scrollbar-thumb {
            background-color: #ddd;
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, .3);
        }
    </style>
</head>
<body>
<div style="width: 100%; height: auto;background: #ffffff;">

<header class="header">
    <div>
        <a href="/"><img src="${webConfig.logo}" alt=""></a>
        <ul class="up-list">
            <li class="reply">
                <a href="/" class="navList">首页</a>
            </li>
            <#list navigationList as navigation>
                <li class="reply">
                    <#if navigation.type=="1">
                        <a href="javascript:void(0);" class="navList">${navigation.name}</a>
                        <#if navigation.webNavigationList?? && (navigation.webNavigationList?size gt 0)>
                            <ul class="list" style="background-image: url('${navigation.picture}');">
                                <#list navigation.webNavigationList as webNavigation>
                                    <li><a href="${webNavigation.url}">${webNavigation.name}</a></li>
                                </#list>
                            </ul>
                        </#if>
                    </#if>
                    <#if navigation.type=="2">
                        <a href="${navigation.url}" class="navList">${navigation.name}</a>
                    </#if>
                </li>
            </#list>
        </ul>
    </div>

</header>
<!--繁体简体-->
<div class="zh">
    <input type="button" value="繁体" onclick="zh_tran('t');"/>
    <input type="button" value="简体" onclick="zh_tran('s');"/>
</div>
</div>
<!--banner-->
<div id="banner">
    <div class="js-silder">
        <div class="silder-scroll">
            <div class="silder-main">
                <#list bannerList as banner>
                    <div class="silder-main-img">
                        <a href="${banner.url!'javascript:void(0)'}"><img src="${banner.image}"/></a>
                    </div>
                </#list>
            </div>
        </div>
    </div>
</div>
<!-- 页面主体 -->

<!-- 主导航 -->
        <nav id="nav_main">
            <div class="lt_art my-accordion">
                <div>
                    <h1>儿童疫苗</h1>
                    <b></b>
                </div>
        
        <ul>
            <#list productList as product>
                <#if product.type=="1">
                    <li><a href="${s.base}/web/product/${product.id}">${product.title}</a></li>
                </#if>
            </#list>
        </ul>
        
                <div>
                    <h1>成儿疫苗</h1>
                    <b></b>
                </div>
        <ul>
            <#list productList as product>
                <#if product.type=="2">
                    <li><a href="${s.base}/web/product/${product.id}">${product.title}</a></li>
                </#if>
            </#list>
        </ul>
      </div>

    <div class="rt_content">
          <h1>${product.title}</h1>
          <img src="${product.productPic}" alt="">
        <div class="box">
          <ul class="list" style="float: left;">
            <li class="active">产品介绍</li>
            <li>机构介绍</li>
            <li>注意事项</li>
          </ul>
          <div id="yy" style="width: 80px; line-height: 30px; margin-right: 20px; background: #7CC4B9;color: #fff; height: 30px;border-radius: 5px; text-align: center; float: right;">立即预约</div>
            <div style="clear: both;"></div>
          <!--一层显示 -->
          <ul class="only list_in">
           <li>
               ${product.content}
          </li>
          <li style="display:none">
              ${product.orgDesc}
           </li>
   
           <li style="display:none">
               ${product.notice}
            </li>
           </ul>

        </div>
            </div>
        </nav>

<footer class="footer">
    <div class="wid">
        <div>
            <img src="${webConfig.bottomPic}" alt="">
        </div>
        <div class="about">
            <h2>关于我们</h2>
            <a>公司简介</a>
            <a>预约支付</a>
            <a>隐私协议</a>
            <a>下载中心</a>
            <a>支付方式</a>
        </div>
        <div class="address">
            <h2>免费咨询热线</h2>
            <p class="tel">${webConfig.linkPhone}</p>
            <p>醫家醫健香港联系方式：</p>
            <p>办公电话：${webConfig.workPhone}</p>
            <p>办公邮箱：${webConfig.eamil}</p>
            <p class="clearfix"><span>办公地址：</span><span class="dizhi">${webConfig.address}</span></p>

        </div>
        <div class="code-box">
              <!-- <span class="code">
                   <img src="${webConfig.wechat}" alt="">
                   <span>扫描二维码<i>获得医疗最新资讯</i> </span>
               </span>-->
            <span class="code">
                    <img src="${webConfig.payPic}" alt="">
                    <span>扫一扫付款<i>微信/支付宝</i> </span>
               </span>
        </div>
    </div>
</footer>
<div class="fixed-right">
    <div class="kefu_box clearfix">
        <div class="kefu">
            <img src="${s.base}/pc/img/kefu.png">
            <p>客服</p>
        </div>
        <div class="d d-service">
            <i class="arrow"></i>
            <div class="inner-box">
                <div class="d-service-item clearfix">
                    <a href="#" class="clearfix"><span class="circleqq"><i class="i-qq"></i></span><h3>咨询在线客服</h3></a>
                </div>
            </div>
        </div>
    </div>
    <div class="yuyue_box clearfix">
        <div class="yuyue kefu">
            <img src="${s.base}/pc/img/yuyue.png">
            <p>在线预约</p>
        </div>
        <div class="d d-service-phone">
            <i class="arrow"></i>
            <div class="inner-box">
                <div class="d-service-item clearfix">
                    <span class="circleqq"><i class="i-tel"></i></span>
                    <div class="text">
                        <p>服务热线</p>
                        <p class="red number">4001-021-758</p>
                    </div>
                </div>
                <div class="d-service-intro clearfix">
                    <p><i></i>功能和特性</p>
                    <p><i></i>价格和优惠</p>
                    <p><i></i>获取内部资料</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pay_box clearfix">
        <div class="pay kefu">
            <img src="${webConfig.payPic}">
            <p>支付方式</p>
        </div>
        <div class="d d-qrcode">
            <i class="arrow"></i>
            <div class="inner-box">
                <div class="qrcode-img"><img src="${webConfig.wechat}" alt=""></div>
                <p>微信服务号</p>
            </div>
        </div>
    </div>
    <!--弹框 预约开始-->
    <div class="cover" style="display: none;"></div>
    <div class="alert-box" style="display: none;">
    <div class="alert">
    	<h3>醫家醫健中心预约单</h3>
        <div class="selected">
        	<p>您选择的产品是：</p>
            <div class="choose-cp">${product.title}</div>
            <!--<select class="choose-cp" disabled >
            	<option>${product.title}</option>
            </select>-->
        </div>
        <div class="infor">
        	<div class="img-box">
            	<img src="${product.showPic}" />
            </div>
            <div class="yuyueinfor">
            	<h4>${product.title}</h4>
                <div class="infor-list">
                	<p class="li-left">现 价：</p>
                    <p class="li-right">￥<span>${product.money}</span><i>元</i></p>
                </div>
                <div class="infor-list">
                	<p class="li-left">预付金额：</p>
                    <p class="li-right">￥<span>${product.payMoney}</span><i>元</i></p>
                </div>
                <div class="infor-list">
                	<p class="li-left">联系人：</p>
                    <input type="text" id="linkUser" />
                </div>
                <div class="infor-list">
                	<p class="li-left">手机号码：</p>
                    <input type="text" id="phone" />
                </div>
                <div class="infor-list">
                	<p class="li-left">预约日期：</p>
                    <input type="text" id="linkDate" class="data-yuyue" />
                </div>
                <button id="submitBtn" type="button">立即预约</button>
            </div>
        </div>
        <div id="calendar"></div>
    </div>
    </div>
<script src="${s.base}/pc/js/jquery-1.11.3.js"></script>
    <script src="${s.base}/mobile/js/jquery.min.js"></script>
    <script src="${s.base}/mobile/js/jquery-weui.min.js"></script>
<script src="${s.base}/pc/js/wySilder.min.js" type="text/javascript"></script>
<script src="${s.base}/pc/js/index.js"></script>
<script src="${s.base}/pc/js/fan.js"></script>
<script src="${s.base}/pc/js/jquery-ui.js"></script>
    <script src="${s.base}/pc/js/calendar.js"></script>
    <script>
        $(".my-accordion").accordion();
    </script>
    <script>
    $(document).ready(function(){
      // 产品切换标签
      $('.box .list>li').click(function(){
          var num = $(this).index();//当前内容页面下标
          $(this).addClass('active').siblings().removeClass('active');
          $(".list_in>li").eq(num).show().siblings().hide();
        });

    });
    </script>
    <script>

        var data = [
            /*{ startDate: "2018-6-10", name: "5" },
            { startDate: "2018-7-10", name: "5" },
            { startDate: "2018-8-10", name: "5" },
            { startDate: "2018-9-10", name: "5" },
            { startDate: "2018-10-10", name: "5" },
            { startDate: "2018-11-1", name: "5" },
            { startDate: "2018-11-1", name: "5" },
            { startDate: "2018-12-1", name: "5" },
            { startDate: "2018-12-1", name: "5" },
            { startDate: "2018-12-1", name: "5" },
            { startDate: "2019-1-10", name: "5" },
            { startDate: "2019-2-10", name: "5" },
            { startDate: "2019-3-10", name: "5" },
            { startDate: "2019-4-10", name: "5" },
            { startDate: "2019-5-10", name: "5" },
            { startDate: "2019-6-10", name: "5" },
            { startDate: "2019-7-10", name: "5" },
            { startDate: "2019-8-10", name: "5" },
            { startDate: "2019-9-10", name: "5" },
            { startDate: "2019-10-10", name: "5" },
            { startDate: "2019-11-10", name: "5" },
            { startDate: "2019-12-10", name: "5" },
            { startDate: "2020-1-10", name: "5" },
            { startDate: "2020-2-10", name: "5" },*/
        ]

        $("#calendar").calendar({
            data: data,
            mode: "month",
            //  maxEvent: 3,
            //showModeBtn: false
            //  newDate: "2018-04-1",
            cellClick: function (events) {
                //viewCell的事件列表
            },
        })
    </script>
    <script>
        $('.cover').click(function () {
            $('.cover').hide();
            $('.alert-box').hide();
        })
        $('#yy').click(function () {
            $('.cover').show();
            $('.alert-box').show();
        })
        var productId='${product.id}';
        $("#submitBtn").on("click",function(){
            var linkUser = $("#linkUser").val();
            if(linkUser == null || linkUser == "") {
                $.toast("请输入联系人", "text");
                return false;
            }

            var phone = $("#phone").val();
            if(phone == null || phone == "") {
                $.toast("请输入手机号", "text");
                return false;
            }
            var linkDate = $("#linkDate").val();
            if(linkDate == null || linkDate == "") {
                $.toast("请选择预约日期", "text");
                return false;
            }
            var param = {linkUser:linkUser,linkDateStr:linkDate,phone:phone,productId:productId};
            $.showLoading("正在提交中");
            $.post("/web/saveProduct",param,function(result){
                if(1==result.returnInfo.state){
                    $.hideLoading();
                    $.alert("您提交预约成功，我们将在3个工作日内联系您进行支付订单！", function() {
                        //点击确认后的回调函数
                        window.location.reload();
                    });

                }else{
                    $.hideLoading();
                    $.toast("提交失败", "text");
                }
            },"json");
        });
    </script>
</body>
</html>